<template>
  <div>
    <HeaderPage />
    <SearchHeader></SearchHeader>
    <navPage></navPage>
    <div class="box">
      <img src="../../assets/img/carBg.png" alt="" />
      <div class="address-box">
        <div class="address-title clearfix">
          <p class="fl">{{ title }}</p>
        </div>
        <div class="address-info">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="所在地区：" prop="region">
              <el-cascader
                v-model="ruleForm.region"
                :options="cityOptions"
                :props="props"
                @change="handleChange"
                placeholder="请选择"
              ></el-cascader>
            </el-form-item>
            <el-form-item label="收货人：" prop="name">
              <el-input
                v-model="ruleForm.name"
                placeholder="请输入收货人姓名"
              ></el-input>
            </el-form-item>
            <el-form-item label="详细地址：" prop="address">
              <el-input
                v-model="ruleForm.address"
                placeholder="请输入详细地址"
              ></el-input>
            </el-form-item>
            <el-form-item label="手机号码：" prop="phone">
              <el-input
                v-model="ruleForm.phone"
                placeholder="请输入手机号"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')"
                >保存收货地址</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <FooterPage></FooterPage>
  </div>
</template>
<script>
import HeaderPage from "../../components/head";
import SearchHeader from "../indexHome/searchHeader";
import FooterPage from "../../components/footer";
import navPage from "../../components/nav";
const { regionData } = require("element-china-area-data/dist/app.commonjs");
import { phone } from "../../plugins/validate";
export default {
  components: {
    HeaderPage,
    SearchHeader,
    FooterPage,
    navPage,
  },

  data() {
    var phoneValidate = (rule, value, callback) => {
      phone(rule, value, callback);
    };
    return {
      title: "新增收货地址",
      ruleForm: {
        region: "",
        phone: "",
        address: "",
        name: "",
      },
      rules: {
        region: [{ required: true, message: "请选择地址", trigger: "change" }],

        phone: [{ validator: phoneValidate, required: true, trigger: "blur" }],
        address: [
          { required: true, message: "请输入详细地址", trigger: "blur" },
          {
            min: 3,
            max: 60,
            message: "长度在 3 到 60 个字符",
            trigger: "blur",
          },
        ],
        name: [
          { required: true, message: "请输入收货人姓名", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" },
        ],
      },
      cityOptions: regionData,
      props: {
        value: "label",
        label: "label",
      },
      type: 'add'
    };
  },
  mounted() {
    var type = this.$route.query.type;
    this.type = type;
    if (type == "add") {
      this.title = "新增收货地址";
    } else {
      this.title = "编辑收货地址";
      var addrItem = JSON.parse(this.$route.query.item);
      console.log(addrItem);
      this.ruleForm = addrItem;
      this.ruleForm.region = addrItem.region.split("/");
      console.log(this.ruleForm.region);
    }
  },
  methods: {
    handleChange(val) {
      console.log(val);
    },
    submitForm(formName) {
      console.log(this.ruleForm.region);

      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.type == "add") {
            this.saveAddr();
          } else {
            this.editAddr();
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    saveAddr() {
      var region = this.ruleForm.region;
      var resultArea = region[0] + "/" + region[1] + "/" + region[2];
      let param = this.ruleForm;
      param.region = resultArea;

      this.$http(
        "post",
        "/sys/iaShoppingTrolley/addReceipt.do",
        param,
        "json"
      ).then((res) => {
        if (res.code == "0000") {
          this.$message({
            type: "success",
            message: "保存成功",
          });
          this.$router.go(-1);
        }
      });
    },
    editAddr() {
       var region = this.ruleForm.region;
      var resultArea = region[0] + "/" + region[1] + "/" + region[2];
      var parms = JSON.parse(JSON.stringify(this.ruleForm))
      parms['region'] = resultArea
      this.$http(
        "PUT",
        "/sys/iaShoppingTrolley/updateReceipt.do",
        parms,
        "json"
      ).then((res) => {
        if (res.code == "0000") {
          this.$message({
            type: "success",
            message: "编辑成功",
          });
          this.$router.go(-1);
        }
      });
    },
  },
};
</script>
<style scoped>
.box {
  width: 1200px;
  margin: 0 auto;
  min-height: 400px;
  background: #fff;
  padding-bottom: 30px;
}
.address-box {
  width: 1049px;
  min-height: 183px;
  border: 1px solid #e6e6e6;
  margin: 34px auto;
  padding: 0 30px 30px 30px;
  box-sizing: border-box;
}
.address-title {
  height: 66px;

  border-bottom: 1px solid #e1e1e1;
}
.address-title p:nth-child(1) {
  width: 100px;
  height: 22px;
  font-size: 16px;
  font-weight: 500;
  color: #262626;
  margin-left: 30px;
  margin-top: 19px;
}
.address-info {
  margin-top: 30px;
}
</style>
<style>
.address-info .el-input__inner {
  background: #f6f6f6;
  width: 400px;
}
.address-info .el-input__icon {
  color: #ee781b;
}
.address-info .el-form-item__label {
  color: #272727;
}
.address-info .el-button--primary {
  width: 145px;
  height: 38px;
  background: #ee781b;
  border-radius: 2px;
  border: 0;
  margin-top: 10px;
}
</style>
